<template>
  <div class="home">
    <h1>父组件</h1>
    <p>{{ fMsg }}</p>
    <!-- 将父组件的数据,传递给子组件
      1.以属性的形式,绑定到子组件上
     -->
    <!-- 子组件传数据给父组件
      绑定事件进行接受数据
    -->
    <ChildCom :fMsg="fMsg" @sendSMsgEvent="getSMsgFun"></ChildCom>
    <p>接受子组件的数据:{{ getSMsg }}</p>
  </div>
</template>

<!-- setup新写法 -->
<script setup>
import { ref } from 'vue'
import ChildCom from '@/components/ChildCom.vue'

let fMsg = ref('父组件的数据')

let getSMsg = ref(null);
// 接受子组件的数据
let getSMsgFun = (data) => {
  console.log(data);
  getSMsg.value = data
}
</script>
